<template>
  <div>
      <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
      <div class="container">
          <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
              :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
              <template #toolbarBtn>
                  <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
              </template>
          </TableCustom>

      </div>
      <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
          :close-on-click-modal="false" @close="closeDialog">
          <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
      </el-dialog>
      <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
          <TableDetail :data="viewData"></TableDetail>
      </el-dialog>
  </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { User } from '@/types/user'
import { News } from '@/types/news';
import { APIFetchAllNewsInfo, APIFetchSysAdminDeleteNews } from '@/api/news';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import { formatDate } from '@/utils/formatDate';
import { APIFetchAllUniversityInfo } from '@/api/university';

// 查询相关
const query = reactive({
  province: '',
  city:'',
  county:'',
});
const searchOpt = ref<FormOptionList[]>([
  { type: 'select', label: '高校所在省：', prop: 'province' },
  { type: 'select', label: '高校所在市：', prop: 'city' },
  { type: 'select', label: '高校所在区县：', prop: 'county' },
])
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: 'index', label: '序号', width: 55, align: 'center' },
  { prop: 'university_id', label: '高校编号' },
  { prop: 'university_name', label: '高校名称' },
  { prop: 'university_level', label: '办学水平' },
  { prop: 'manager_type', label: '所属部门' },
  { prop: '所属地区', label: '所属地区' },
  { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
  index: 1,
  size: 10,
  total: 0,
})
const tableData = ref<News[]>([]);
const getData = async () => {
  // const res = await fetchUserData()
  // console.log(res)
  // tableData.value = res.data.list;
  // page.total = res.data.pageTotal;
  const res = await APIFetchAllUniversityInfo()
  console.log(res)
  let i=0
  for(i=0;i<res.data.data.length;i++){
    res.data.data[i].create_time=formatDate(res.data.data[i].create_time)
  }
  tableData.value=res.data.data
  page.total=res.data.data.length
};
getData();

const changePage = (val: number) => {
  page.index = val;
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: '100px',
  span: 12,
  list: [
      { type: 'input', label: '用户名', prop: 'name', required: true },
      { type: 'input', label: '手机号', prop: 'phone', required: true },
      { type: 'input', label: '密码', prop: 'password', required: true },
      { type: 'input', label: '邮箱', prop: 'email', required: true },
      { type: 'input', label: '角色', prop: 'role', required: true },
  ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: User) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};
const updateData = () => {
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: []
});
const handleView = (row: User) => {
  viewData.value.row = { ...row }
  viewData.value.list = [
      {
          prop: 'id',
          label: '用户ID',
      },
      {
          prop: 'name',
          label: '用户名',
      },
      {
          prop: 'password',
          label: '密码',
      },
      {
          prop: 'email',
          label: '邮箱',
      },
      {
          prop: 'phone',
          label: '电话',
      },
      {
          prop: 'role',
          label: '角色',
      },
      {
          prop: 'date',
          label: '注册日期',
      },
  ]
  visible1.value = true;
};

// 删除相关
const handleDelete = (row: News) => {
  const params={news_id:row.news_id}
  APIFetchSysAdminDeleteNews(params)
  .then(()=>{
    ElMessage.success('下架成功');
  })
  
}
</script>

<style scoped></style>